<template>
  <div class="img-list">
    <!-- 头部 -->
    <myhander titleName="图文资讯"></myhander>
    <div class="cate">
      <ul id="cateul">
        <li @click="handleImgInfo(0)"><span>全部</span></li>
        <li v-for="item in imgNavList" :key="item.id" @click="handleImgInfo(item.id)"><span>{{item.title}}</span></li>
      </ul>
    </div>
    <div class="img-list-box">
      <ul>
        <li v-for="imgItem in imgList" :key="imgItem.id">
          <router-link :to="`/img_detail/${imgItem.id}`"><img :src="imgItem.img_url" alt="imgItem.title"></router-link>
          <p><span class="title">{{imgItem.title}}</span>{{imgItem.zhaiyao}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import myhander from '@/components/myhander'
import {getImgsNav, getImgsList} from '@/api'
export default {
  data () {
    return {
      imgNavList: [], // 导航
      imgList: []// 内容图片
    }
  },
  components: {
    myhander
  },
  created () {
    this.initImgslist()
    // 页面一加载就执行获取全部的图片
    this.handleImgInfo(0)
  },
  methods: {
    initImgslist () {
      getImgsNav()
        .then(res => {
          // console.log(res)
          this.imgNavList = res.message
          // 分类总数量，因为全部这一项没有包含在res.message数据中，所以需要加1
          let totalNum = this.imgNavList.length + 1
          // 设置ul的宽度
          document.querySelector('#cateul').style.width = totalNum * 60 + 'px'
        })
    },
    handleImgInfo (id) {
      getImgsList(id)
        .then(res => {
          // console.log(res)
          this.imgList = res.message
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .img-list {
    margin-bottom: 55px;
    margin-top: 40px;
  }
  .cate {
    max-width: 100%;
    margin: 0;
    overflow-x:auto;
    overflow-y: hidden;
    font-size: 14px;
    ul {
      padding-left: 10px;
      margin: 5px 0;
      li {
        list-style: none;
        display: inline-block;
        padding: 0 0 0 5px;
        span {
          color:#0094ff;
        }
      }
    }
  }
  .img-list-box {
    ul {
      padding: 0;
      li {
        list-style: none;
        position: relative;
      }
    }
    p {
      font-size: 14px;
      color: #fff;
      position: absolute;
      bottom: 0px;
      left: 0px;
      background-color: rgba(0,0,0,0.4);
      .title {
        font-weight: bold;
      }
    }
    img {
      width: 100%;
    }
  }

  image[lazy=loading] {
    width: 100%;
    margin: auto;
  }
</style>
